---
import PageBanner from "../components/PageBanner.vue";
interface Props {
  playInfo: PlayInfoItem[];
}
const { playInfo = [] } = Astro.props;
---

<div class="lg:pt-100px lg:pt-90px md:pt-80px pt-50px bg-[#f9f9f9]">
  <div
    class="bg-[#f9f9f9] w-full lg:pb-100px lg:pb-90px md:pb-80px pb-50px"
  >
    {
      playInfo.map((item) => {
        return (
          <>
            <div class="container m-auto">
              <div class="section-title text-center mx-auto lg:mb-50px lt-lg:mb-30px">
                <h2 class="font-bold inline-block pb-10px mb-20px relative lg:text-40px lg:text-35px md:text-40px lt-md:text-25px">
                  {item.module}
                  <span class="bottomborder" />
                </h2>
              </div>
              <div class="flex">
                <div class="w-full flex m-auto items-center">
                  {item.swiper.map((i) => (
                    <PageBanner client:only="vue" banners={i} />
                  ))}
                </div>
              </div>
            </div>
          </>
        );
      })
    }
  </div>
</div>

<style scoped>
  .bottomborder {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 30px;
    background: #509cff;
    z-index: 1;
  }
.section-title h2 span {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40%;
    height: 3px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 30px;
    background: #509cff;
    z-index: 1;
  }

  .section-title h2 span::after {
    position: inherit;
    content: "";
    width: 10px;
    height: 10px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #509cff;
  }
</style>
